<template>
  <div v-if="!item.hidden">
    <!-- {{ item }}
    ----------------------- -->
    <el-menu-item
      v-if="item.path && (!hasMenuChil(item) || item.children.length === 1)"
      :index="onlyPath(basePath, item)"
      @click="scrollPage"
    >
      <!-- <i :class="ifOnlyShowChild(item)['meta']['icon']"></i> -->
      <el-image
        class="icon-img"
        v-if="ifOnlyShowChild(item)['meta']['iconImg']"
        :src="personCenterImg(ifOnlyShowChild(item)['meta']['iconImg'])"
      ></el-image>

      <span slot="title">{{ ifOnlyShowChild(item)['meta'].title }} </span>
    </el-menu-item>

    <el-submenu v-else ref="subMenu" :index="item.path" popper-append-to-body>
      <template slot="title">
        <!-- <i :class="item.icon"></i> -->
        <el-image
          class="icon-img"
          :src="personCenterImg(item.meta.iconImg)"
        ></el-image>
        <span slot="title">{{ item.meta.title }} </span>
      </template>
      <SideMuneItem
        v-for="child in item.children"
        :key="child.path"
        :basePath="basePath + '/' + child.path"
        :item="child"
      />
    </el-submenu>
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
  name: 'SideMuneItem',
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    basePath: {
      type: String,
      default: '',
    },
  },
  computed: {
    personCenterImg() {
      return (imgName) => {
        let baseRoute = '@/assets/icons/personCenter/' + imgName
        return require('@/assets/icons/personCenter/' + imgName)
      }
    },
    hasMenuChil() {
      return (item) => {
        let hasMenuChil = item.children || false
        if (hasMenuChil) {
          hasMenuChil = item.children.some((item) => {
            return !item.hidden
          })
        }

        return hasMenuChil
      }
    },
    ifOnlyShowChild() {
      return (item) => {
        let hasShowChild = this.hasMenuChil(item)
        if (hasShowChild.length === 1) {
          return { obj: item.children[0] }
        }
        return item
      }
    },
    onlyPath() {
      return (basePath, item) => {
        let hasShowChild = this.hasMenuChil(item)
        if (hasShowChild.length === 1) {
          return basePath + '/' + item.children[0].path
        }
        return basePath
      }
    },
  },
  data() {
    return {}
  },
  methods: {
    scrollPage() {
      scrollTo(500, 400)
    },
  },
}
</script>

<style>
.icon-img {
  width: 1.5rem;
  height: 1.5rem;
}
</style>
